<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/jquery-2.1.4.js" ></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style>
        .content{
            width: 850px;
            height: 400px;
            position: absolute;
            background-color: white;
            /*opacity: 0.5;*/
            top: 159px;
            left: 330px;
            z-index: 10;
            background-image: linear-gradient(#8cc5ff, #5bc0de);
        }
        .con{
            width: 500px;
            height: 230px;
            /*background-color: white;*/
            margin: 80PX auto;

        }
        #div{
            position: relative;
        }
        .swipper{
            position: relative;
        }
        .lunboimg{
            height: 720px;
            width: 1500px;
        }
        .title{
            width: 500px;
            margin: 0 auto;
        }
        .title_con{
            color: green;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="div">
    <div class="swipper">
        <template>
            <el-carousel :interval="4000" arrow="always"  height="720px">
                <el-carousel-item v-for="img in imgs" :key="img.id" >
                    <img :src="img.url" alt="" class="lunboimg">
                </el-carousel-item>
            </el-carousel>
        </template>
    </div>
    <div class="content">
        <div class="title">
            <p class="title_con">悦客房车欢迎您</p>
        </div>

        <div class="con">
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <el-form-item label="用户名">
                    <el-input v-model="formLabelAlign.name" placeholder="请输入用户名或密码"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formLabelAlign.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-checkbox v-model="formLabelAlign.remenberMe">记住密码</el-checkbox><br><br>
                <el-button type="primary" @click="login()">登录</el-button>
            </el-form>
        </div>

    </div>



</div>
<script type="text/javascript">
    new Vue({
        el:"#div",
        data:{
            labelPosition: 'left',
            formLabelAlign: {
                name: '',
                password: '',
                remenberMe:false
            },
            imgs:[
                {
                    id:1,
                    url:'/img/lunbo1.png'
                },
                {
                    id:2,
                    url:'/img/lunbo2.png'
                },
                {
                    id:3,
                    url:'/img/lunbo3.png'
                },
                {
                    id:4,
                    url:'/img/lunbo4.png'
                }
            ]
        },
        methods:{
            login(){
                var _this = this;
                $.ajax({
                    url: "/login",
                    type: "get",
                    data: _this.formLabelAlign,
                    dataType: "json",
                    success: function (data) {
                        if(data.code=="200"){
                            location.href="/page/index.html"
                        }
                    },
                    error: function (data) {
                        alert(data.responseJSON.message);
                    }
                });
            }
        }
    })
</script>
</body>
</html>